<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@include file="common/common.jsp"%>     
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>设置头像</title>
		<link rel="stylesheet" href="${ctx }/css/reset.css" />
		<link rel="stylesheet" href="${ctx }/css/public.css" />
		<link rel="stylesheet" href="${ctx }/css/style.css" />
	</head>
	<body>
		<div class="vip_header">
			<div class="container clearfix">
				<a href="index.html" class="logo"><img src="${ctx }/images/logo.png" alt="LOGO" /></a>
				<ul>
					<li><a href="">首页</a></li>
					<li class="account">账户设置<img src="${ctx }/images/bigmore.png" alt="" />
						<ul>
							<li><a href="">个人信息</a></li>
							<li><a href="">账户安全</a></li>
							<li><a href="">手机绑定</a></li>
							<li><a href="">收货地址</a></li>
							<li><a href="">消息提醒</a></li>
							<li><a href="">修改登录密码</a></li>
						</ul>
					</li>
					<li><a href="">消息</a></li>
				</ul>
				<div>
					<input type="text" placeholder="新款服饰抢先看"/>
					<button>搜索</button>
					<span>我的购物车
                            <i><%=cartItemsCount%></i></span>
				</div>
			</div>
		</div>
		
		<div class="vip_main vip_setting set_header container clearfix">
			<div class="left l">
				<span>
					<img src="${ctx }/images/header.png" alt="" />
				</span>
				
				<ul class="f16 three">
					<li>我的资料
						<ul>
							<li><a href="vip_safe_setting.html">安全设置</a></li>
							<li><a href="vip_data_setting.html" class="red">个人资料</a></li>
							<li><a href=" vip_set_address.html">收货地址</a></li>
						</ul>
					</li>
				</ul>
			</div>
			<div class="right l">
				<div>
					<a href="${ctx }/member/vip_data_setting" >基本资料</a>
					<a href="${ctx }/member/vip_set_header" class="red">头像照片</a>
				</div>
				<form action="" method="post" enctype="multipart/form-data">
					<div class="upload_photo">
						请选择您要上传的头像
						<input type="file" id="uploadImg" onchange="setImagePreview();"  accept="image/jpg,image/jpeg,image/png"/>
					</div>
					
					<p class="f14 nine">仅支持JPG、GIF、PNG图片文件，且文件小于4M</p>
					<div class="upload_header clearfix">
						<ul>
							<li class="big_header">
								<img class="previewBig six f16" id="previewBig"/>
							</li>
							<li class="small_header">
								<p>效果预览</p>
								<p class="f12 nine">您上传的图片会自动生成两种尺寸，请注意小头像的尺寸是否清晰</p>
								<div class="tac preview">
									<div class="small f10">
										<span id="smallImgSpan" style="width:'60px';height:'60px'">没有预览可用</span>
										<img class="previewSmall f10"  id="previewSmall">
									</div>
								</div>
						</li>
						</ul>
					</div>
					<button>保存</button>
				</form>
			</div>
		</div>
		<!--底部-->
		<div class="footer clearfix">
			<div class="top container f16 three">
				<span class="a">全国包邮</span>
				<span class="b">正品保障</span>
				<span class="c">售后无忧</span>
				<span class="last">准时送达</span>
			</div>
			<div class="middle container f14 three clearfix">
				<ul>
					<li>
						<p>购物指南</p>
						<p>
							<a href="">购物流程</a>
						</p>
						<p>
							<a href="">会员制度</a>
						</p>
						<p>
							<a href="">订单查询</a>
						</p>
						<p>
							<a href="">发票制度</a>
						</p>
						<p>
							<a href="">常见问题</a>
						</p>
					</li>
					<li>
						<p>支付/配送方式</p>
						<p>
							<a href="">货到付款</a>
						</p>
						<p>
							<a href="">网上支付</a>
						</p>
						<p>
							<a href="">银行转账</a>
						</p>
						<p>
							<a href="">礼品卡支付</a>
						</p>
						<p>
							<a href="">其他支付</a>
						</p>
					</li>
					<li>
						<p>购物条款</p>
						<p>
							<a href="">配送范围及运费</a>
						</p>
						<p>
							<a href="">配送进度查询</a>
						</p>
						<p>
							<a href="">自提服务</a>
						</p>
						<p>
							<a href="">商品验货与签收</a>
						</p>
					</li>
					<li>
						<p>售后保障</p>
						<p>
							<a href="">退换货政策</a>
						</p>
						<p>
							<a href="">退换货流程</a>
						</p>
						<p>
							<a href="">退款说明</a>
						</p>
						<p>
							<a href="">延保说明页面</a>
						</p>
						<p>
							<a href="">联系客服</a>
						</p>
					</li>
					<li>
						<p>商家合作</p>
						<p>
							<a href="">商家入驻</a>
						</p>
						<p>
							<a href="">商必赢</a>
						</p>
						<p>
							<a href="">平台规则</a>
						</p>
						<p>
							<a href="">企业采购</a>
						</p>
					</li>
					<li class="last">
						<p>APP更优惠</p>
						<img src="${ctx }/images/code.png" alt="微信扫码" />
					</li>
				</ul>
			</div>
			<div class="bottom">
				<div class="container fff f12">
					<p class="friendly_link">
						友情链接：
						<a href="">淘宝&#x3000;|</a>
						<a href="">衣联网&#x3000;|</a>
						<a href="">高德&#x3000;|</a>
						<a href="">虾米&#x3000;|</a>
						<a href="">时尚品牌网&#x3000;|</a>
						<a href="">全球购&#x3000;|</a>
						<a href="">梦芭莎&#x3000;|</a>
						<a href="">乐淘网&#x3000;|</a>
						<a href="">天天特价</a>
					</p>
					<p class="a">
						<a href="">关于我们</a>
						<a href="">联系我们</a>
						<a href="">商家入驻</a>
						<a href="">商家登录</a>
						<a href="">隐私政策</a>
						<a href="">风险监测</a>
					</p>
					<p class="b">
						<span>经营许可证：豫ICP备14050023号&#x3000;|</span>
						<span>&#x3000;网络文化经营许可证京网文[2014]2148-348号</span>
						<span>&#x3000;客服电话：4006067733</span>
					</p>
					<p class="c">
						<a>技术支持：郑州云图信息技术有限公司 &nbsp;&nbsp;&nbsp;|</a>
						<span>&#x3000;Copyright 2014-2017 三网合一版权所有</span>
					</p>
				</div>
			</div>
		</div>
	<script src="${ctx }/js/jquery-2.0.2.js"></script>
	<script src="${ctx }/js/index.js"></script>
	<script type="text/javascript">
	function setImagePreview() { 
		var docObj=document.getElementById("uploadImg"); 
		var imgObjPreviewBig=document.getElementById("previewBig"); 
		var imgObjPreviewSmall=document.getElementById("previewSmall"); 
		if(docObj.files && docObj.files[0]){ 
			//火狐下，直接设img属性
		//	imgObjPreview.style.display = 'block'; 
			imgObjPreviewBig.style.width = '110px'; 
			imgObjPreviewBig.style.height = '110px'; 
			imgObjPreviewSmall.style.height = '80px'; 
			imgObjPreviewSmall.style.height = '80px'; 
			//imgObjPreview.style.margin-left='18px'; 
			//imgObjPreview.src = docObj.files[0].getAsDataURL(); 
			//火狐7以上版本不能用上面的getAsDataURL()方式获取，需要一下方式
			$('#smallImgSpan').hide();
			imgObjPreviewBig.src = window.URL.createObjectURL(docObj.files[0]); 
			imgObjPreviewSmall.src = window.URL.createObjectURL(docObj.files[0]); 
		}else{ 
		//IE下，使用滤镜
			docObj.select(); 
			var imgSrc = document.selection.createRange().text; 
			var localImagId = document.getElementById("localImag"); 
			//必须设置初始大小
			localImagId.style.width = "300px"; 
			localImagId.style.height = "120px"; 
		//图片异常的捕捉，防止用户修改后缀来伪造图片
			try{ 
				localImagId.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)"; 
				localImagId.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgSrc; 
			}catch(e){ 
				alert("您上传的图片格式不正确，请重新选择!"); 
				return false;  
			}
		}
	}	
	</script>
	</body>
</html>
